<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    html,body,#app{
      padding: 0px;
      margin: 0px;
      height: 100%;
    }
  </style>
</head>
<body>
<div id="app" style="height: 100%;width: 100%">
  <el-container style="width: 100%;height: 100%">
    <el-header style="padding-top: 10px">
      <el-form :inline="true" class="demo-form-inline" style="display: flex;align-items: center">
        <el-form-item label="比赛编号">
          <el-input placeholder="比赛编号" v-model="mid"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.prevent="selectResultByMid()">查询</el-button>
          <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main style="height: 100%;padding: 0 0 0 0">
      <el-table
              :data="results"
              height="100%"
              border
              style="width: 100%;">
        <el-table-column
                prop="resultId"
                label="编号">
        </el-table-column>
        <el-table-column
                prop="matchId"
                label="比赛编号">
        </el-table-column>
        <el-table-column
                prop="round"
                label="场次">
        </el-table-column>
        <el-table-column
                prop="winnerTeamId"
                label="获胜队伍编号">
        </el-table-column>
        <el-table-column
                prop="loserTeamId"
                label="失败队伍编号">
        </el-table-column>
        <el-table-column
                prop="date"
                label="比赛时长">
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>

  <el-dialog title="比赛详情" :visible.sync="dialogFormVisible">
    <el-form ref="form" :model="result" label-width="80px">
      <el-form-item label="对阵双方">
        <el-select v-model="result.matchId"
                   @change="selectMatchById()" placeholder="请选择比赛" style="width: 300px">
          <el-option v-for="match in matches"
                     :label="match.awayTeamName+' VS '+match.homeTeamName"
                     :value="match.matchId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="比赛场次">
        <el-select v-model="result.round" placeholder="请选择场次" style="width: 300px">
          <el-option label="第一场" value="1"></el-option>
          <el-option label="第二场" value="2"></el-option>
          <el-option label="第三场" value="3"></el-option>
        </el-select>
      </el-form-item>

      <div v-if="result.matchId">
        <el-form-item label="获胜队伍">
          <el-radio-group v-model="result.winnerTeamId">
            <el-radio :label="match.ateams.teamId" border>{{match.awayTeamName}}</el-radio>
            <el-radio :label="match.hteams.teamId" border>{{match.homeTeamName}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="失败队伍">
          <el-radio-group v-model="result.loserTeamId">
            <el-radio :label="match.ateams.teamId" border>{{match.awayTeamName}}</el-radio>
            <el-radio :label="match.hteams.teamId" border>{{match.homeTeamName}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click.prevent="addResult()">立即添加</el-button>
        <el-button @click="dialogFormVisible=false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</div>
<script>
  var v=new Vue({
    el:"#app",
    data:{
      result: {
        matchId: '',
        round:'',
        winnerTeamId: '',
        loserTeamId: '',
      },
      results:[],
      matches:{},
      match:[],
      dialogFormVisible:false,
      mid:''
    },
    created(){
      this.selectMatches();
      this.selectAllResult();
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      addResult() {
        axios.post("/yjh-admin/yjh/admin/addResult",this.result).then(res=>{
          if (res.data.code==1){
            this.$message(res.data.msg);
          }else {
            this.$alter(res.data.msg);
          }
          this.selectAllResult();
        })
      },
      selectAllResult(){
        axios.get("/yjh-admin/yjh/admin/selectAllResult").then(res=>{
          this.results=res.data;
        })
      },
      selectResultByMid(){
        axios.post("/yjh-admin/yjh/admin/selectByMid?mid="+this.mid).then(res=>{
          if (res.data.code){
            this.results=res.data.data;
            this.$message(res.data.msg);
          }else {
            this.$alert(res.data.msg);
          }
        })
      },
      selectMatches(){
        axios.get("/yjh-admin/yjh/admin/selectMatches").then(res=>{
          this.matches=res.data;
        })
      },
      selectMatchById(){
        axios.post("/yjh-admin/yjh/admin/selectMatchById?mid="+this.result.matchId).then(res=>{
          this.match=res.data.data[0];
        })
      }
    }
  });
</script>
</body>
</html>
<style>
   .el-container{
     height: 300px;
     width: 400px;
   }
   .el-header{
     background-color: #eee;
   }
   .el-footer{
     background-color: #ddd;
   }
   .el-aside{
     background-color: #cccccc;
   }
   .el-main{
     background-color: #555555;
   }


</style>